import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Modal } from 'react-native';

/**
 * 处理状态
 * 
 */

export const priceOptions = {
  0: '全部',
  1: '未询价',
  2: '沟通中',
  4: '待确认',
};

const PriceStatusDropdown = ({ onSelect, visible, onClose, priceStatusShowText, top }) => {

  const [selectedOption, setSelectedOption] = useState(priceStatusShowText);

  // 监听父组件传递的 parentValue，同步到子组件状态
  useEffect(() => {
    setSelectedOption(priceStatusShowText);
  }, [priceStatusShowText]);

  const options = [
    { title: '全部', value: 0 },
    { title: '未询价', value: 1 },
    { title: '沟通中', value: 2 },
    { title: '待确认', value: 4 }

  ];

  const handleSelect = (option) => {
    setSelectedOption(option.title);

    onSelect && onSelect(option);
  };

  setVisible = (visibleValue) => {
    visible = visibleValue
  };

  return (
    <View>

      <Modal
        visible={visible}
        transparent={true}
        animationType="fade"
        onRequestClose={() => onClose()}
      >
        <TouchableOpacity
          style={[styles.overlay, {marginTop:  top}]}
          activeOpacity={1}
          onPress={() => onClose()}
        >
          <View style={styles.dropdown}>
            {options.map((option, index) => (
              <TouchableOpacity
                key={index}
                style={[
                  styles.option,
                  {}
                ]}
                onPress={() => handleSelect(option)}
              >
                <Text style={[
                  styles.optionText,
                  selectedOption === option.title && styles.selectedOptionText
                ]}>
                  {option.title}
                </Text>
                {selectedOption === option.title && (
                  <Text style={styles.checkmark}>✓</Text>
                )}
              </TouchableOpacity>
            ))}
          </View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
    paddingVertical: 10,
    backgroundColor: '#fff',
  },
  headerText: {
    fontSize: 16,
    marginRight: 5,
  },
  arrow: {
    fontSize: 12,
  },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    marginTop: 100
  },
  dropdown: {
    backgroundColor: '#fff',
  },
  option: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 15,
    paddingHorizontal: 20,

  },
  selectedOption: {
    backgroundColor: '#f8f8f8',
  },
  optionText: {
    fontSize: 16,
    color: '#666666',
  },
  selectedOptionText: {
    color: '#F99802',
  },
  checkmark: {
    color: '#F99802',
    fontSize: 16,
    position: 'absolute',
    right: 20,
  },
});

export default PriceStatusDropdown;